<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="out">
		<div>
			<p>有什么新鲜事要告诉大家？</p>
			<textarea name="content" id = "txt" cols = "30" rows = "10"></textarea>
		</div>
		<input type="button" value="添加">
		<div>
			<ul>
				
			</ul>
		</div>
	</div>
</body>
<script>
	// var out = document.querySelector(".out");
	var btn = document.querySelector("input");
	var txt = document.querySelector("#txt");
	var ul = document.querySelector("ul");
	

	btn.onclick = function(){

		var content = txt.value;

		//待解决，就是内容重复问题
		if(content){

			var li = document.createElement("li");

			var butt = document.createElement("button");

			ul.appendChild(li);

			ul.appendChild(butt);

			butt.innerHTML = "delete";

			li.innerHTML = content;
		}

			//添加删除
		butt.onclick = function(){

       		ul.removeChild(li);
       		ul.removeChild(butt);
		}

	}



</script>
</html>